<template>
  <div class="staff-manage">
    <div class="top-add">
      <el-button size="small" type="primary" @click="addUser">添加员工</el-button>
      <!-- <el-button size="small" v-print="'#printTest'" type="primary">打印</el-button> -->
    </div>

    <el-row>
      <el-col :span="24">
        <el-table id="printTest" :data="staffList" border style="width: 100%">
          <el-table-column prop="account" label="账号"></el-table-column>
          <el-table-column prop="password" label="密码"></el-table-column>
          <el-table-column prop="ware" label="所属仓库"></el-table-column>
          <el-table-column prop="date" label="创建日期"></el-table-column>
          <el-table-column prop="userRemark" label="备注"></el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button size="mini" icon="el-icon-edit">修改</el-button>
              <el-button size="mini" icon="el-icon-delete" @click="deleteStaff(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <adduser :adduserDialog.sync="adduserDialog"></adduser>
  </div>
</template>

<script>
import adduser from './adduser';
export default {
  name: 'userIndex',
  components: {
    adduser
  },
  data() {
    return {
      adduserDialog: false,
      staffList: [
        {
          account: 'admin',
          password: 123456,
          userRemark: '员工',
          ware: '战保仓库',
          date: '2021/1/18'
        }
      ]
    }
  },
  methods: {
    deleteStaff(item) {

    },
    addUser() {
      this.adduserDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .staff-manage {
    width: 100%;
  }
  .top-add {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
  }
</style>